import QtQuick 1.0

Rectangle {
    id: radioBtn
    height: 50
    color: "#00FFFFFF"
    property alias buttonWidth: radioBtn.width
    property alias buttonText: btnText.text
    property alias buttonBorderSrc: btnBorder.source

    /** Border **/
    BorderImage {
        id: btnBorder
        x: 0; y: 0
        anchors.fill: parent;
        border.left: 20; border.right: 20;
        border.top: 20; border.bottom: 20;
        source: "../images/Button_default.png";
    }

    /** button text **/
    Text {
        id: btnText
        font.family: nokiaStandard.name;
        font.pixelSize: 22
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        color: "#282828";
        anchors.fill: parent
    }


    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (radioFieldGroup.selectedBtnID != undefined ){
                radioFieldGroup.selectedBtnID.state = ""
            }
            radioFieldGroup.selectedBtnID = parent;
            radioFieldGroup.selectedBtnID.state = "isSelected"
            console.log("Clicked: " + radioFieldGroup.selectedBtnID.buttonText);

        }
    }

    states: [
        State {
            name: "isSelected"; when: mouseArea.pressed;
            PropertyChanges { target: radioBtn; buttonBorderSrc: "../images/Button_active2.png" }
            PropertyChanges { target: btnText; color: "#FFFFFF" }
        }
    ]
}

